<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<base href="<%=basePath%>">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="stylesheets/theme.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script type="application/x-javascript">
	
	
	
	

	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 




</script>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/flexslider.css" type="text/css"
	media="screen" />
<script src="js/simpleCart.min.js"></script>
<script src="js/bootstrap.js"></script>
<style type="text/css">
#line-chart {
	height: 300px;
	width: 800px;
	margin: 0px auto;
	margin-top: 1em;
}

.brand {
	font-family: georgia, serif;
}

.brand .first {
	color: #ccc;
	font-style: italic;
}

.brand .second {
	color: #fff;
	font-weight: bold;
}
</style>
<style>
.contact,.table tr th {
	text-align: center;
	font-family: serif;
}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	
				$(document).ready(function() {
					$("#search").click(function() {
						var content = $("#content").val();
						$.ajax({
							url: 'findByAccount',
							data: {
								"content": content
							},
							dataType: "json",
							success: function(data) {
								if(data!="none"){
								$("#tb").html(" "); //清空内容
								$(data).each(function(
											index,
											person) {
											//this.author ，this代表的是当前的每条数据，跟foreach遍历的时候的当前对象是一样
											var str = "";
											str = str + "<tr><td></td><td></td><td>" + person.account + "</td><td>" + person.name + "</td><td id='s"+person.id+"'>" + person.balance + "</td>";
											str = str + "<td></td><td><button  name='"+person.id+"'type='button' class='orange' data-target='#pencilModal' role='button' data-toggle='modal' onclick='modify(this)'>修改</button> ";
											str = str + " <button  name='"+person.id+"' type='button' class='orange' data-target='#delete'   onclick='deleteuser(this)' role='button' data-toggle='modal'>删除</button></td></tr>";
											$("#tb").append(str);
										});
								}
							}
						});
					});
					//修改用户余额
					$("#modifyBalanceConf").click(function() {
						var id=$(this).prop("name");
						var balance = $("#balance").val();
						$.ajax({
							type: "post",
							url: 'ManagerServlet',
							data: {
								"id": id,
								"balance": balance,
								"op":"modify"
							},
							success: function(data) {
								if (data == "modify") {
									$("#"+id).html(balance);
									$("#s"+id).html(balance);
								}
							}
						});
					});
					
					//删除用户
			       $("#deleteUser").click(function (){
			    	  var id=$(this).prop("name");
			    	  $.ajax({
							type: "post",
							url: 'ManagerServlet',
							data: {
								"id": id,
								"op":"delete",
							},
							success: function(data) {
								 if(data == "delete"){
										$("#"+id).parent().remove();
										$("#s"+id).parent().remove();
									}
							}
						});
			    	
			       });
					
					
				});
			</script>
<!-- Basic Page Needs
  ================================================== -->
<meta charset="utf-8">
<title>ChinaZ</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Mobile Specific Metas
  ================================================== -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
  ================================================== -->
<link rel="stylesheet" href="css/zerogrid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slide.css">
<link rel="stylesheet" href="css/menu.css">
<link href="css/styless.css" rel="stylesheet" type="text/css"
	media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css"
	media="screen" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/style.css">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
	type="text/css">
<!--  js -->
<script src="js/jquery.min.js"></script>
<script src="js/simpleCart.min.js">
	
</script>

<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
    <![endif]-->
<!--[if lt IE 9]>
		<script src="js/html5.js"></script>
		<script src="js/css3-mediaqueries.js"></script>
	<![endif]-->

</head>
<body>
	<div class="wrap-body">
		<!--////////////////////////////////////Header-->
		<header class="home-header">
			<div class="zerogrid">
				<div class="logo"><div><img src="images/foodLogo.jpg" /></div></div>
				<div class="logo-title">智能点餐系统</div>
			</div>
		</header>
		<!--//////////////////////////////////////Menu-->
		<a href="#" class="nav-toggle">Toggle Navigation</a>
		<nav class="cmn-tile-nav">
			<ul class="clearfix">
				<li class="colour-1"><a href="index.jsp">首页</a></li>
				<li class="colour-2"><a href="gallery.jsp">下午茶</a></li>
				<li class="colour-7"><a href="staff.jsp">鲜果购</a></li>
				<li class="colour-5"><a href="reservation.jsp">精选小吃</a></li>
				<li class="colour-4"><a href="archive.jsp">超市</a></li>
				<li class="colour-6"><a href="news.jsp">精选介绍</a></li>
				<li class="colour-8"><a href="menu.jsp">购物车</a></li>
				<li class="colour-7"><a href="login.jsp">登录</a></li>
				<li class="colour-2"><a href="manager.jsp">管理员</a></li>
				<li class="colour-1"><a href="order.jsp">查看订单</a></li>
			</ul>
		</nav>

		<!--////////////////////////////////////Container-->
		<section id="container" class="sub-page">
			<div class="wrap-container zerogrid">
				<div class="crumbs">
					<ul>
						<li><a href="index.jsp">首页</a></li>
						<li><a href="manager.jsp">管理员</a></li>
					</ul>
				</div>
				<div id="main-content">
					<div class="wrap-content">
						<div class="row">
							<div class="col-3-3">
								<!-- contact -->
								<div class="contact">
									<div class="container">

										<div class="contact-grid">
											<div class="container-fluid">
												<div class="row-fluid">
													<div class="row-fluid">

														<div class="block">
															<a href="#widget1container" class="block-heading"
																data-toggle="collapse">查询 </a>
															<div id="widget1container" class="block-body collapse in">
																<div class="btn-toolbar">
																	<div class="search">
																		<div class="clearfix"></div>
																		<div class="search d1">
																			<form>
																				<input type="text" id="content" placeholder="搜索用户信息"
																					name="content">
																				<button  type="button" id="search"></button>
																			</form>
																		</div>
																	</div>
																	<div class="btn-group"></div>
																</div>


																<table class="table">
																	<thead>

																		<tr>
																			<th></th>
																			<th></th>
																			<th>用户帐号</th>
																			<th>用户姓名</th>
																			<th>余额</th>
																			<th></th>
																		</tr>
																	</thead>

																	<tbody id="tb">
																			<tr>
																				<td></td>
																				<td></td>
																				<td></td>
																				<td><a href="#pencilModal" role="button"
																					data-toggle="modal"><i class="icon-pencil"></i>
																				</a> <a href="#myModal" role="button"
																					data-toggle="modal"><i class="icon-remove"></i>
																				</a></td>
																			</tr>
																	
																	</tbody>


																</table>
															</div>
														</div>





														<div class="block">
															<a href="#tablewidget" class="block-heading"
																data-toggle="collapse">用户信息</a>
															<div id="tablewidget" class="block-body collapse in">
																<table class="table">
																	<thead>

																		<tr>
																			<th></th>
																			<th></th>
																			<th>用户账号</th>
																			<th>用户姓名</th>
																			<th>余额</th>
																			<th></th>
																		</tr>
																	</thead>
																	<tbody id="tb1">
																	</tbody>
																</table>
																<div  id="nav" >
																	<ul id="pageUl">
																		
																	</ul>
																</div>
															</div>
														</div>


														<div class="modal fade " id="delete" tabindex="-1"
															role="dialog" aria-labelledby="myModalLabel">
															<div class="modal-dialog" role="document">
																<div class="modal-content">
																	<div class="modal-header">
																		<button type="button" class="close"
																			data-dismiss="modal">×</button>
																		<h3 id="myModalLabel">删除信息</h3>
																	</div>
																	<div class="modal-body">
																		<p class="error-text">
																			<i class="icon-warning-sign modal-icon"></i>你确定你要删除用户吗?
																		</p>
																	</div>
																	<div class="modal-footer">
																		<button id="deleteUser" class="btn btn-danger" data-dismiss="modal">
																			确定</button>
																		<button  class="btn btn-danger" data-dismiss="modal"
																			aria-hidden="true">取消</button>
																	</div>
																</div>
															</div>
														</div>
														<div class="modal fade " id="pencilModal" tabindex="-1"
															role="dialog" aria-labelledby="myModalLabel">
															<div class="modal-dialog" role="document">
																<div class="modal-content">
																	<div class="modal-header">
																		<button type="button" class="close"
																			data-dismiss="modal" aria-hidden="true">×</button>
																		<h3 id="ModalLabel">修改余额</h3>
																	</div>
																	<div class="modal-body">
																		<input type="text" id="balance" value="" class="form-group" style="border-bottom: #bfc3ca solid 1px;width:81px;"
																			placeholder="请输入金额" class="input-xlarge inputText">
																	</div>
																	<div class="modal-footer">
																		<button id="modifyBalanceConf" class="btn btn-danger"
																			data-dismiss="modal">确定</button>
																		<button class="btn btn-danger" data-dismiss="modal"
																			aria-hidden="true">取消</button>
																	</div>
																</div>
															</div>
														</div>





													</div>

												</div>
											</div>
										</div>
										<div class="contact-details">
											<div class="clearfix"></div>
										</div>
									</div>
								</div>

								<!-- contact -->



							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<!--////////////////////////////////////Footer-->
		<footer class="zerogrid">
			<div class="wrap-footer">
				<div class="row">
					<div class="col-1-3">
						<div class="wrap-col">
						</div>
					</div>
					<div class="col-1-3">
					<div class="wrap-col">
						<h4>联系客服</h4>
						<p>0594-1234567</p>
						<p>周一至周日 9:00-23:00</p>
						<p>客服不受理商务合作</p>
					</div>
					</div>
				</div>
			</div>
			<div class="copyright">
				<div class="wrapper">
					<a target="_blank" href="#"></a>
					<ul class="quick-link f-right">
					</ul>
				</div>
			</div>
		</footer>
		<!-- js -->
		<script src="js/classie.js"></script>
		<script src="js/demo.js"></script>
		<script type="text/javascript">
		function modify(obj){
			var id = $(obj).prop("name");
			$("#modifyBalanceConf").prop("name",id);
			$("#balance").html("");
		}
		function deleteuser(obj){
			var id = $(obj).prop("name");
			$("#deleteUser").prop("name",id);
		}
		</script>
		<script>
		var currentPage=1;//当前页，点搜索的时候，默认获取第一页
		var pageSize = 4;//每页几条
		var totalRecord=-1;//总记录数，初始化值-1，表示还没有从数据库获取
		var totalPage=0;
		$(document).ready(function(){
			onSearch();
		});
		function onSearch(){
			$.ajax({
				url:"ManagerServlet",
				type:"post",
				data:{"op":"getPersonListByPage","currentPage":currentPage,"pageSize":pageSize,"totalRecord":totalRecord},
				dataType:"json",
				success:function(data){
					currentPage = data.currentPage;
					totalRecord = data.totalRecord;
					totalPage = data.totalPage;
					var list =data.list; 
					$("#tb1").html(" ");
					$(list).each(function(
							index,
							person) {
							//this.author ，this代表的是当前的每条数据，跟foreach遍历的时候的当前对象是一样
							var str = "";
							str = str + "<tr><td></td><td></td><td>" + person.account + "</td><td>" + person.name + "</td><td id='"+person.id+"'>" + person.balance + "</td>";
							str = str + "<td></td><td><button  name='"+person.id+"'type='button' class='orange' data-target='#pencilModal' role='button' data-toggle='modal' onclick='modify(this)'>修改</button> ";
							str = str + " <button  name='"+person.id+"' type='button' class='orange' data-target='#delete'   onclick='deleteuser(this)' role='button' data-toggle='modal'>删除</button></td></tr>";
							$("#tb1").append(str);
						});
					var pageStr="";
					pageStr="<li><a onclick='home()'>第一条</a></li><li><a onclick='prePage()'>上一页</a></li><li><a onclick='nextPage()'>下一页</a></li>";
					pageStr= pageStr+"<li><a onclick='end()'>最后一条</a></li><li>当前页"+currentPage+"/"+totalPage+"</li>";
					$("#pageUl").html(pageStr);
				}
			});
		}
		
		//首页
		function home(){
			if(currentPage!=1){
				currentPage = 1;
				onSearch();
			}
			
			
		}
		//上一页
		function prePage(){
			if(currentPage!=1){
				currentPage = currentPage-1;
				onSearch();
			}
			
		}
		//下一页
		function nextPage(){
			if(currentPage!=totalPage){
				currentPage= currentPage+1;
				onSearch();
			}
		}
		//尾页
		function end(){
			if(currentPage!=totalPage){
				currentPage = totalPage;
				onSearch();
			}
		}
	</script>	
	
	</div>
</body>
<style type="text/css">
#nav {  
    height: 40px;  
    background-color: #efeff0;
    margin-left: -16px;
    margin-right: -16px;
}  
  
#nav ul {  
    list-style: none;  
}  
  
#nav li {  
    display: inline;  
    line-height: 40px; 
    color: #000;  
}  
  
#nav a {  
    color: #000;  
    text-decoration: none;  
    padding: 20px 20px;  
}  
  
#nav a:hover {  
   cursor: pointer;
}
</style>

</html>